<template>
	<view class="app-user-wallet-extract e-rela" :style="[AppSkinVar]">
		<view class="app-user-wallet-extract__header e-abso bg-primary">
			<view class="e-m-b-10">
				<text class="c-white e-font-24">{{ $t('user.可提现余额') }}</text>
			</view>
			<view>
				<text class="c-white fw-600 e-font-48">{{ $unitEn }}</text>
				<text class="c-white fw-600 e-font-64">{{ account.money }}</text>
			</view>
		</view>
		<view class="app-user-wallet-extract__body bg-white e-radius-20 e-rela e-m-b-40">
			<view class="e-m-b-20">
				<text class="e-font-30">{{ $t('user.提现金额') }}</text>
			</view>
			<view class="e-flex e-flex-between e-m-b-40">
				<view class="e-p-t-20 e-p-b-20 e-flex">
					<text class="fw-600 e-font-48 c-35">{{ $unitEn }}</text>
					<e-input v-model="cashmoney" fontSize="48rpx" :customStyle="{ fontWeight: 600 }" type="number"
						border="none" :placeholder="$t('user.请输入提现金额')" />
				</view>
				<text class="c-primary white-nowrap" @tap="cashmoney = account.money">{{ $t('user.全部提现') }}</text>
			</view>
			<view class="e-flex e-m-b-30" @tap="showPicker = true">
				<view class="">
					{{$t('user.提现方式')}}
				</view>
				<view class="e-flex-1 e-m-l-60 e-flex">
					<text class="e-flex-1 text-right">{{payType.configName}}</text>
					<app-image  size="36rpx" src="classify/arrow-right.png" mode=""></app-image>
				</view>
			</view>
			<view class="e-flex e-flex-items-start" v-if="payType.configKey === 'cash.mode.yhk'">
				<text>{{ $t('user.到账银行卡') }}</text>
				<view class="e-flex-1 e-m-l-60 text-right">
					<view class="e-flex e-flex-end e-m-b-10" @tap="handleSelectCard">
						<text>
							{{
								card.bankname
									? `${card.bankname}(${shield({
											str: card.bankcode,
											type: 2,
											start: 0,
											end: 4,
											shieldCode: ''
									  })})`
									: $t('user.请选择银行卡')
							}}
						</text>
						<app-image  size="36rpx" src="classify/arrow-right.png" mode=""></app-image>
					</view>
					<text
						class="c-b3">{{ $t('user.提现手续费') }}{{scaleModel === 1 ?'' :$unitEn}}{{ scale }}{{scaleModel === 1 ?'%' :''}}</text>
				</view>
			</view>

			<view class="box e-flex align-initial"
				v-if="payType.configKey === 'cash.mode.wx' || payType.configKey === 'cash.mode.zfb'">
				<text>提现账号</text>
				<view class="e-flex-1 e-m-l-60">
					<input type="text" class="text-right" v-model="bankcode" placeholder="请输入提现账号" />
				</view>
			</view>
		</view>

		<e-button size="large" type="primary" shape="circle" :text="$t('user.立即提现')" @click="extract"
			:throttleTime="1000"></e-button>
		<password-popup ref="passwordRef" :show="passwordShow" @confirm="confirm"
			@close="passwordShow = false"></password-popup>


		<!-- 提现方式 -->
		<e-picker :cancelText="$t('common.取消')" :confirmText="$t('common.确认')" :show="showPicker" :columns="payTypeList"
			@cancel="showPicker = false" @confirm="handleConfirmPayType" keyName="configName"></e-picker>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue';
	import { postExtract, getExtractRule, type BankCardItem, getCashConfig } from '@/common/request/api';
	import { useCurrentInstance } from '@/common/hooks';
	import { useUser } from '@/common/stores';
	import { storeToRefs } from 'pinia';
	import type { PasswordPopupInstance } from '@/typings/components';
	import { onLoad } from '@dcloudio/uni-app';
	import { shield } from '@/common/utils';
	
	const props = defineProps({
		id: String
	});
	
	const ctx = useCurrentInstance();

	const userStore = useUser();
	const { userInfo ,accountList,defaultAccount } = storeToRefs(userStore);
	const account = computed(() => {
		return props.id ? accountList.value.find((item) => item.strategy === props.id) : defaultAccount.value
			
	});

	const card = ref({
		bankname: '',
		bankcode: '',
		id: -1
	});
	const cashmoney = ref('');
	const show = ref(false);

	const passwordShow = ref(false);
	const scale = ref(0);
	const maxval = ref(0);
	const minval = ref(0);
	const scaleModel = ref(1)

	const handleSelectCard = () => {
		ctx.$goTo(
			'/pages/user/bankCard/index',
			{ type: 1 },
			{
				SelectBankCard: (data : BankCardItem) => {
					card.value = {
						bankname: data.bankname,
						bankcode: data.bankcode,
						id: data.id
					};
				}
			}
		);
	};

	const passwordRef = ref<PasswordPopupInstance>();
	const extract = () => {
		// 提现需要先实名认证
		if (userInfo.value.isAuth !== 2) {
			ctx.$showModal({
				title: '提现需实名',
				confirmText: '去实名',
				cancelColor: '#333333',
				success: function (res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/pages/public/realName/index?pageTitle=实名认证',
						})
					}
				}
			})
			return
		}
		
		if (!cashmoney.value) {
			ctx.$toastApp(ctx.$t('user.请输入提现金额'));
			return;
		}
		if (Number(cashmoney.value) < minval.value) {
			ctx.$toastApp(ctx.$t('user.最低提现金额为') + minval.value);
			return;
		}
		if (Number(cashmoney.value) > maxval.value) {
			ctx.$toastApp(ctx.$t('user.最高提现金额为') + maxval.value);
			return;
		}
		if (!payType.value) {
			ctx.$toastApp(ctx.$t('user.请选择提现方式'))
			return
		}
		if ((payType.value.configKey === 'cash.mode.wx' || payType.value.configKey === 'cash.mode.zfb')&&!bankcode.value) {
			ctx.$toastApp('请输入提现账号')
			return
		}
		if (payType.value.configKey === 'cash.mode.yhk' && !card.value.bankname) {
			ctx.$toastApp(ctx.$t('user.请选择银行卡'));
			return;
		}

		passwordShow.value = true;
	};
	const confirm = (payword : string) => {
		passwordRef.value?.reset?.();
		passwordShow.value = false;
		let params
		if (payType.value.configKey === 'cash.mode.yhk') {
			params = {
				payword,
				cashmoney: cashmoney.value,
				bankid: card.value.id,
				cashType: payType.value.remark,
				strategy: account.value.strategy
			}
		} else {
			params = {
				payword,
				cashmoney: cashmoney.value,
				bankcode: bankcode.value,
				strategy: account.value.strategy,
				cashType: payType.value.remark
			}
		}
		postExtract(params).then((res) => {
			if (res.code == 200) {
				userStore.getAccountList();
				uni.redirectTo({
					url: '/pages/user/wallet/success?type=0'
				});
			}
		});
	};

	const payType = ref({ remark: '', configKey: '', configName: '' })
	const showPicker = ref(false)
	const payTypeList = ref<Record<string, any>>([[{ remark: '1', configKey: 'cash.mode.yhk', configName: '银行卡' },{ remark: '2', configKey: 'cash.mode.zfb', configName: '支付宝' }]])
	const bankcode = ref('')

	const handleConfirmPayType = (e : any) => {
		payType.value = e.value[0]
		showPicker.value = false
	}

	onLoad(() => {
		userStore.getUserInfo()
		getExtractRule().then((res) => {
			scale.value = ctx.$accMul(res.data.scale || 0, 100);
			scaleModel.value = res.data.scaleModel
			minval.value = res.data.minval;
			maxval.value = res.data.maxval;
		});
	});
</script>
<style lang="scss" scoped>
	@include appBem_b(user-wallet-extract) {
		padding: 214rpx 20rpx 0 20rpx;

		.e-font-64 {
			font-size: 64rpx;
		}

		@include appBem_e(header) {
			height: 304rpx;
			top: 0;
			left: 0;
			right: 0;
			padding: 40rpx 0 0 48rpx;
		}

		@include appBem_e(body) {
			z-index: 1;
			padding: 40rpx 40rpx 40rpx 30rpx;
		}
	}

	.c-b3 {
		color: #b3b3b3;
	}
</style>
